import React from 'react';
import Svg, { Path, Mask, G, Rect } from 'react-native-svg';

import { IconProps } from '../../types';

export const ResolvedIcon = ({
  stroke = '#858585',
  strokeWidth = '1.5',
}: IconProps): JSX.Element => {
  return (
    <Svg width="100%" height="100%" viewBox="0 0 24 24" fill="none">
      <Path
        d="M21.3333 11.1466V12.0053C21.3321 14.018 20.6804 15.9763 19.4753 17.5883C18.2702 19.2003 16.5764 20.3796 14.6463 20.9503C12.7162 21.5209 10.6534 21.4524 8.76546 20.7549C6.87753 20.0574 5.26564 18.7683 4.17019 17.0799C3.07474 15.3915 2.55443 13.3942 2.68686 11.3859C2.81928 9.37756 3.59735 7.46587 4.90502 5.9359C6.21269 4.40593 7.97989 3.33966 9.94307 2.8961C11.9062 2.45255 13.9602 2.65548 15.7986 3.47464M21.3333 4.53329L12 13.876L9.19996 11.076"
        stroke={stroke}
        strokeWidth={strokeWidth}
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </Svg>
  );
};

export const ResolvedFilledIcon = () => {
  return (
    <Svg width="33" height="32" viewBox="0 0 33 32" fill="none">
      <Mask id="mask0_2222_48093" maskUnits="userSpaceOnUse" x="0" y="0" width="33" height="32">
        <Rect x="0.75" width="32" height="32" fill="#D9D9D9" />
      </Mask>
      <G mask="url(#mask0_2222_48093)">
        <Path
          d="M16.7493 22.667C18.5938 22.667 20.166 22.017 21.466 20.717C22.766 19.417 23.416 17.8448 23.416 16.0003C23.416 14.1559 22.766 12.5837 21.466 11.2837C20.166 9.98366 18.5938 9.33366 16.7493 9.33366C14.9049 9.33366 13.3327 9.98366 12.0327 11.2837C10.7327 12.5837 10.0827 14.1559 10.0827 16.0003C10.0827 17.8448 10.7327 19.417 12.0327 20.717C13.3327 22.017 14.9049 22.667 16.7493 22.667ZM16.7493 29.3337C14.9049 29.3337 13.1716 28.9837 11.5493 28.2837C9.92713 27.5837 8.51602 26.6337 7.31602 25.4337C6.11602 24.2337 5.16602 22.8225 4.46602 21.2003C3.76602 19.5781 3.41602 17.8448 3.41602 16.0003C3.41602 14.1559 3.76602 12.4225 4.46602 10.8003C5.16602 9.1781 6.11602 7.76699 7.31602 6.56699C8.51602 5.36699 9.92713 4.41699 11.5493 3.71699C13.1716 3.01699 14.9049 2.66699 16.7493 2.66699C18.5938 2.66699 20.3271 3.01699 21.9494 3.71699C23.5716 4.41699 24.9827 5.36699 26.1827 6.56699C27.3827 7.76699 28.3327 9.1781 29.0327 10.8003C29.7327 12.4225 30.0827 14.1559 30.0827 16.0003C30.0827 17.8448 29.7327 19.5781 29.0327 21.2003C28.3327 22.8225 27.3827 24.2337 26.1827 25.4337C24.9827 26.6337 23.5716 27.5837 21.9494 28.2837C20.3271 28.9837 18.5938 29.3337 16.7493 29.3337ZM16.7493 26.667C19.7271 26.667 22.2493 25.6337 24.316 23.567C26.3827 21.5003 27.416 18.9781 27.416 16.0003C27.416 13.0225 26.3827 10.5003 24.316 8.43366C22.2493 6.36699 19.7271 5.33366 16.7493 5.33366C13.7716 5.33366 11.2493 6.36699 9.18268 8.43366C7.11602 10.5003 6.08268 13.0225 6.08268 16.0003C6.08268 18.9781 7.11602 21.5003 9.18268 23.567C11.2493 25.6337 13.7716 26.667 16.7493 26.667Z"
          fill="#0D9B8A"
        />
      </G>
    </Svg>
  );
};

export const SLAIcon = ({ color }: { color: string }) => {
  return (
    <Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
      <Path
        d="M11.6327 22.3022C16.6073 22.3022 19.9316 18.9422 19.9316 13.8845C19.9316 5.49055 12.7724 2 7.88091 2C6.9311 2 6.31372 2.3443 6.31372 2.9973C6.31372 3.24662 6.43246 3.51969 6.63429 3.75715C7.72657 5.06313 8.83072 6.5947 8.85447 8.47057C8.85447 8.86236 8.84259 9.19481 8.55764 9.70532L9.0563 9.62221C8.64075 8.22125 7.57223 7.21208 6.52744 7.21208C6.08814 7.21208 5.79133 7.53263 5.79133 8.00753C5.79133 8.245 5.86257 8.81488 5.86257 9.21855C5.86257 11.2013 4.25977 12.4835 4.25977 15.8791C4.25977 19.7377 7.20417 22.3022 11.6327 22.3022ZM11.8701 19.6901C10.1011 19.6901 8.91383 18.6098 8.91383 17.007C8.91383 15.3329 10.113 14.7393 10.2673 13.6589C10.2792 13.5639 10.3267 13.5402 10.3979 13.5995C10.8372 13.9913 11.1103 14.4662 11.3358 15.0242C11.8464 14.3356 12.0838 12.8634 11.9413 11.3319C11.9295 11.2369 11.9888 11.1894 12.0719 11.225C14.1734 12.1986 15.2419 14.2763 15.2419 16.1403C15.2419 18.0281 14.1378 19.6901 11.8701 19.6901Z"
        fill={color}
      />
    </Svg>
  );
};
